<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>云课堂</title>
	<style type="text/css">
		html,body{
			margin:0;
			padding: 0;
		}
		header{
			background-color: #2e333f;
			width: 100%;
			height: 60px;
		}
		header>img{
			margin-top:10px;
			margin-left: 28px;
			float: left;
		}
		header>span{
			margin-top: 10px;
			color: white;
			font-size: 28px;
			padding-left: 20px;
			float: left;
		}
		select{
			margin-top: 10px;
			border: none;
			height: 35px;
			margin-left: 20px;
			float: left;
		}
		input{
			height: 35px;
			padding: 0;
			margin-top: 10px;
			/*margin-left: 20px;*/
			border: none;
			float: left;
		}
		button{
			background-image: url("search.png");
			height: 35px;
			width: 35px;
			margin-top: 10px;
			border: none;
			float: left;
		}
		nav{
			background-color: white;
			height: 88px;
		}
		nav>div{
			margin-top: 10px;
			margin-left: 28px;
			font-size: 20px;
		}
		nav span{
			margin-top: 10px;
			font-size: 20px;
			color: gray;
		}
		.ul1{
			list-style: none;
			text-align: center;
			padding-left: 28px;
			margin: 0px;
		}

		li{
			padding-right: 18px;
			float: left;
			background-color: white;
		}
		.ul2{
			list-style: none;
			overflow: hidden;
			text-align: center;
			background-color: white;
			margin-left: 28px;
			padding-left: 10px;
			width: 95%;
		}
		a{
			height: 40px;
			display: inline-block;
			width: 100px;
			text-decoration: none;
			line-height: 40px;
			padding: 10px;
		}
		a:link{
			color: black;
		}

		main{
			padding: 20px;
			background-color: #f5f5f5;
			height: 666px;
			width: 100%;
		}
		main>div{
			float: left;
			background-color: white;
			width: 18%;
			height: 333px;
			margin-left: 20px;
		}
		.picsty{
			width: 100%;
		}
		.p1{
			font-size: 20px;
		}
		.p2{
			font-size: 15px;
			color: gray;
		}
	</style>
</head>
<body>
	<header>
		<img src="logo.png" alt="img">
		<span>精品课</span>
		<span>微专业</span>
		<span>下载APP</span>
		<select>
			<option value="课程">课程</option>
			<option value="电影">电影</option>
			<option value="吃饭">吃饭</option>
		</select>
		<input type="text" placeholder="搜索课程">
		<button></button>
		<span>我的学习</span>
		<span>消息</span>
		<span>购物车|</span>
		<span>登录/注册</span>
		<img src="small.jpg" alt="img" style="border-radius: 15px 15px 15px 15px;margin-left: 10px;margin-top: 17px;">
	</header>
	<nav style="clear: both;">
		<div>
			首页>
			<span>精品课程</span>
		</div>
		<ul class="ul1">
			<li><a href="">全部</a></li>
			<li><a href="">办公效率</a></li>
			<li><a href="">职业发展</a></li>
			<li><a href="">编程开发</a></li>
			<li><a href="">产品设计</a></li>
			<li><a href="">生活方式</a></li>
			<li><a href="">升学辅导</a></li>
			<li><a href="">语言学习</a></li>
		</ul>
	</nav>

	<main>
		<ul class="ul2">
			<li><a href="">畅销</a></li>
			<li><a href="">好评</a></li>
			<li><a href="">新课</a></li>
		</ul>
		<div style="margin-left: 28px;">
			<img src="1.png" alt="img" class="picsty">
			<p class="p1">秋叶Office三合一</p>
			<p class="p2">幻方秋叶PPTz</p>
			<img src="star.png" alt="">&nbsp;5&nbsp;(5346人学过)
			<p>￥399.0</p>
		</div>

		<div>
			<img src="2.png" alt="img" class="picsty">	
			<p class="p1">PS教程超级合辑</p>
			<p class="p2">设计软件通</p>
			<img src="star.png" alt="img">&nbsp;5&nbsp;(18537人学过)
			<p>￥199.0</p>
		</div>

		<div>
			<img src="3.jpg" alt="img" class="picsty">
			<p class="p1">和秋叶一起学PPt</p>
			<p class="p2">幻方秋叶PPT</p>
			<img src="star.png" alt="img">&nbsp;4.9&nbsp;(18537人学过)
			<p>￥169.00</p>
		</div>
		
		<div>
			<img src="4.jpg" alt="img" class="picsty">
			<p class="p1">街舞微信竖版视频零基础制作课程</p>
			<p class="p2">街舞影像人</p>
			18537人学过
			<p>￥298.00</p>			
		</div>
		
		<div>
			<img src="5.png" alt="img" class="picsty">
			<p class="p1">VIP学习卡使卖家快速成长</p>
			<p class="p2">齐论教育</p>
			35人学过
			<p>￥3198.00</p>			
		</div>			
		
	</main>
</body>
</html>